<template>
  <!-- Activity 活动管理 -->
  <PageContainer>
    <view class="container">
      <Tabs v-model="currentTab" :data="dataList">
        <Header title="活动" :is-go-back="!isTabbarPage" :is-box-shadow="false">
          <view class="px-16">
            <UniSearchBar
              placeholder="请输入搜索内容"
              radius="35"
              @confirm="searchFnc"
              @cancel="restFnc"
              @clear="restFnc"
            />
          </view>
          <TabNav tabBarColor="#ef833a" />
        </Header>
        <TabsItem name="全部" :value="-1"></TabsItem>
        <TabsItem name="进行中" :value="0"></TabsItem>
        <TabsItem name="已结束" :value="1"></TabsItem>
      </Tabs>
      <Paglist
        v-model="dataList"
        :is-init-api="true"
        :parame="parame"
        @register="register"
        :scroll-top-bottom="260"
        :is-show-loadmore="dataList.length > 1"
      >
        <template v-for="v in dataList" :key="v.id">
          <view class="activity-item">
            <ActivityItem :item="v" @refresh="upload" />
          </view>
        </template>
      </Paglist>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /**  Activity  活动管理 */
  import PageContainer from '@/components/PageContainer/index.vue';
  import { reactive, ref, provide, watch } from 'vue';
  import Header from '@/components/Header/index.vue';
  import Tabs from '@/components/tabs/index.vue';
  import TabsItem from '@/components/tabs/item.vue';
  import TabNav from '@/components/tabs/nav.vue';
  import Paglist from '@/components/Paglist/index.vue';
  import { useConList } from '@/components/Paglist/useConList';
  import { activityPageList } from '@/api/activity';
  import type { IActivityListResData } from '@/api/activity/types';
  import ActivityItem from '@/components/ActivityItem/index.vue';
  import UniSearchBar from '@/uni_modules/uni-search-bar/components/uni-search-bar/uni-search-bar.vue';
  import { onLoad } from '@/router';
  import { propTypes } from '@/utils/propTypes';

  wx.hideShareMenu({
    menus: ['shareTimeline'],
  });

  defineProps({
    isTabbarPage: propTypes.bool.def(false),
  });

  provide('api', async (obj: any) => {
    const res = await activityPageList(obj);
    return res;
  });

  const currentTab = ref(-1);

  const dataList = ref<IActivityListResData[]>([]);
  const status = reactive({
    underway: [1, 2, 3, 4],
    end: [5, 6],
  });
  const parame = reactive({
    activityStatuss: undefined as undefined | Number[],
    title: '',
    myActivity: void 0,
  });
  const [register, { refresh }] = useConList();

  const upload = () => refresh();

  watch(currentTab, tabsChange);
  function tabsChange(index: number) {
    currentTab.value = index;
    if (index === -1) {
      parame.activityStatuss = undefined;
    } else {
      parame.activityStatuss = index ? status.end : status.underway;
    }

    refresh && refresh();
  }

  function searchFnc(e: { value: string }) {
    parame.title = e.value;
    refresh && refresh();
  }

  function restFnc() {
    parame.title && searchFnc({ value: '' });
  }
</script>
<style lang="scss" scoped>
  .activity-item {
    padding: 0 30rpx;
    margin-bottom: 30rpx;
    &:nth-child(1) {
      padding-top: 30rpx;
    }
  }
</style>
